﻿<div class="WAll">
 <style>
    .swiper-slide {
        text-align: center;
        font-size: 12px;
        background: #fff;
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }
	.Slide4 .swiper-slide:nth-child(2n) {
        width: 40%;
    }
    .Slide4 .swiper-slide:nth-child(3n) {
        width: 20%;
    }

    .Slide8 .swiper-container {
        width: 100%;
        padding-top: 50px;
        padding-bottom: 50px;
    }
    .Slide8 .swiper-slide {
        background-position: center;
        background-size: cover;
        width: 180px;
        height: 180px;

    }
	/*轮播图*/
	.SlideBox{height:50vw;margin-bottom:10px!important}
    </style>
	<div class="ContentBlockTitle">默认</div>
	<!-- 轮播图 -->
	<section class="swiper-container SlideBox Slide1">
		<ul class="swiper-wrapper">
			<li class="swiper-slide BCover" style="background-image:url(http://lorempixel.com/600/600/nature/1)"></li>
			<li class="swiper-slide BCover" style="background-image:url(http://lorempixel.com/600/600/nature/2)"></li>
			<li class="swiper-slide BCover" style="background-image:url(http://lorempixel.com/600/600/nature/3)"></li>
			<li class="swiper-slide BCover" style="background-image:url(http://lorempixel.com/600/600/nature/4)"></li>
			<li class="swiper-slide BCover" style="background-image:url(http://lorempixel.com/600/600/nature/5)"></li>
		</ul>
		<!-- Add Pagination -->
		<div class="swiper-pagination pagination1"></div>
	</section>
	<!-- 轮播图 end -->
	<div class="ContentBlockTitle">纵向展示</div>
	<!-- 轮播图 -->
	<section class="swiper-container SlideBox Slide2">
		<ul class="swiper-wrapper">
			<li class="swiper-slide BCover" style="background-image:url(http://lorempixel.com/600/600/nature/6)"></li>
			<li class="swiper-slide BCover" style="background-image:url(http://lorempixel.com/600/600/nature/7)"></li>
			<li class="swiper-slide BCover" style="background-image:url(http://lorempixel.com/600/600/nature/8)"></li>
			<li class="swiper-slide BCover" style="background-image:url(http://lorempixel.com/600/600/nature/5)"></li>
			<li class="swiper-slide BCover" style="background-image:url(http://lorempixel.com/600/600/nature/10)"></li>
		</ul>
		<!-- Add Pagination -->
		<div class="swiper-pagination pagination2"></div>
	</section>
	<!-- 轮播图 end -->
	<div class="ContentBlockTitle">展示多个</div>
	<!-- 轮播图 -->
	<section class="swiper-container SlideBox Slide3" style="height:80px">
		<ul class="swiper-wrapper">
			<li class="swiper-slide BCover" style="background-image:url(images/01.jpg)"></li>
			<li class="swiper-slide BCover" style="background-image:url(images/02.jpg)"></li>
			<li class="swiper-slide BCover" style="background-image:url(images/03.jpg)"></li>
			<li class="swiper-slide BCover" style="background-image:url(images/01.jpg)"></li>
			<li class="swiper-slide BCover" style="background-image:url(images/02.jpg)"></li>
		</ul>
		<!-- Add Pagination -->
		<div class="swiper-pagination pagination3"></div>
	</section>
	<!-- 轮播图 end -->
	<div class="ContentBlockTitle">展示多个不同尺寸</div>
	<!-- 轮播图 -->
	<section class="swiper-container SlideBox Slide4">
		<ul class="swiper-wrapper">
			<li class="swiper-slide BCover" style="background-image:url(images/03.jpg)"></li>
			<li class="swiper-slide BCover" style="background-image:url(images/01.jpg)"></li>
			<li class="swiper-slide BCover" style="background-image:url(images/02.jpg)"></li>
			<li class="swiper-slide BCover" style="background-image:url(images/03.jpg)"></li>
			<li class="swiper-slide BCover" style="background-image:url(images/03.jpg)"></li>
		</ul>
		<!-- Add Pagination -->
		<div class="swiper-pagination pagination4"></div>
	</section>
	<!-- 轮播图 end -->
	<div class="ContentBlockTitle">3D</div>
	<!-- 轮播图 -->
	<section class="swiper-container SlideBox Slide7">
		<ul class="swiper-wrapper">
			<li class="swiper-slide BCover" style="background-image:url(http://lorempixel.com/600/600/nature/5)"></li>
			<li class="swiper-slide BCover" style="background-image:url(http://lorempixel.com/600/600/nature/6)"></li>
			<li class="swiper-slide BCover" style="background-image:url(http://lorempixel.com/600/600/nature/7)"></li>
			<li class="swiper-slide BCover" style="background-image:url(http://lorempixel.com/600/600/nature/8)"></li>
			<li class="swiper-slide BCover" style="background-image:url(http://lorempixel.com/600/600/nature/9)"></li>
		</ul>
        <!-- Add Pagination -->
        <div class="swiper-pagination pagination7"></div>
	</section>
	<!-- 轮播图 end -->
	<!-- 轮播图 -->
	
	<section class="swiper-container SlideBox Slide8">
		<ul class="swiper-wrapper">
			<li class="swiper-slide BCover" style="background-image:url(http://lorempixel.com/600/600/nature/1)"></li>
			<li class="swiper-slide BCover" style="background-image:url(http://lorempixel.com/600/600/nature/2)"></li>
			<li class="swiper-slide BCover" style="background-image:url(http://lorempixel.com/600/600/nature/3)"></li>
			<li class="swiper-slide BCover" style="background-image:url(http://lorempixel.com/600/600/nature/4)"></li>
			<li class="swiper-slide BCover" style="background-image:url(http://lorempixel.com/600/600/nature/5)"></li>
			<li class="swiper-slide BCover" style="background-image:url(http://lorempixel.com/600/600/nature/6)"></li>
			<li class="swiper-slide BCover" style="background-image:url(http://lorempixel.com/600/600/nature/7)"></li>
			<li class="swiper-slide BCover" style="background-image:url(http://lorempixel.com/600/600/nature/8)"></li>
			<li class="swiper-slide BCover" style="background-image:url(http://lorempixel.com/600/600/nature/9)"></li>
		</ul>
        <!-- Add Pagination -->
        <div class="swiper-pagination pagination8"></div>
	</section>
	<!-- 轮播图 end -->
	<div class="ContentBlockTitle">自由模式</div>
	<!-- 轮播图 -->
	<section class="swiper-container SlideBox Slide5" style="height:80px">
		<ul class="swiper-wrapper">
			<li class="swiper-slide BCover">Slide 1</li>
			<li class="swiper-slide BCover">Slide 2</li>
			<li class="swiper-slide BCover">Slide 3</li>
			<li class="swiper-slide BCover">Slide 4</li>
			<li class="swiper-slide BCover">Slide 5</li>
			<li class="swiper-slide BCover">Slide 6</li>
			<li class="swiper-slide BCover">Slide 7</li>
			<li class="swiper-slide BCover">Slide 8</li>
			<li class="swiper-slide BCover">Slide 9</li>
			<li class="swiper-slide BCover">Slide 10</li>
		</ul>
	</section>
	<!-- 轮播图 end -->
	<div class="ContentBlockTitle">带箭头</div>
	<!-- 轮播图 -->
	<section class="swiper-container SlideBox Slide6">
		<ul class="swiper-wrapper">
			<li class="swiper-slide BCover">Slide 1</li>
			<li class="swiper-slide BCover">Slide 2</li>
			<li class="swiper-slide BCover">Slide 3</li>
			<li class="swiper-slide BCover">Slide 4</li>
			<li class="swiper-slide BCover">Slide 5</li>
			<li class="swiper-slide BCover">Slide 6</li>
			<li class="swiper-slide BCover">Slide 7</li>
			<li class="swiper-slide BCover">Slide 8</li>
			<li class="swiper-slide BCover">Slide 9</li>
			<li class="swiper-slide BCover">Slide 10</li>
		</ul>
        <!-- Add Pagination -->
        <div class="swiper-pagination pagination6"></div>
        <!-- Add Arrows -->
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
	</section>
	<!-- 轮播图 end -->


</div>




















